import 'package:cook_dinner/config/include.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

const nicknames = ['芋泥饼', '酸菜鱼', '秋刀鱼'];
const cookName = ['小杨小杨', '土豆丝', '星之卡比'];

class HomeFish extends StatelessWidget {
  const HomeFish({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 198.rpx,
      padding: EdgeInsets.only(left: 22.rpx),
      margin: EdgeInsets.only(bottom: 16.rpx),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 3,
        itemBuilder: (context, index) => HomeFishItem(index: index),
      ),
    );
  }
}

class HomeFishItem extends StatelessWidget {
  const HomeFishItem({Key? key, required this.index}) : super(key: key);

  final int index;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(right: 13.rpx),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(8.rpx),
            child: Image.asset(
              'assets/images/fish0${index + 1}.png',
              width: 162.rpx,
              height: 138.rpx,
              fit: BoxFit.cover,
            ),
          ),
          SizedBox(height: 11.9.rpx),
          Text(
            nicknames[index],
            style: TextStyle(fontSize: 14.rpx, color: Colors.black),
          ),
          SizedBox(height: 5.5.rpx),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/images/avart0${index + 1}.png',
                    width: 20.rpx,
                    height: 20.rpx,
                    fit: BoxFit.cover,
                  ),
                  SizedBox(width: 8.rpx),
                  Text(
                    cookName[index],
                    style: TextStyle(
                        fontSize: 12.rpx, color: const Color(0xff999999)),
                  ),
                ],
              ),
              Text(
                '51min',
                style:
                    TextStyle(fontSize: 12.rpx, color: const Color(0xffF35410)),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
